<template>
    <div>

        <div class="theader" style="padding-left:30px">
            <div style="width: 50px;">
                <!-- <input type="checkbox">全选 -->
                <!-- <el-checkbox>全选
                </el-checkbox> -->
            </div>
            <div style="width: 150px;">编号</div>
            <div style="width: 150px;">用户名</div>
            <div style="width: 200px;">人员编号</div>
            <div style="width: 200px;">所属角色</div>
            <div style="width: 250px;">说明</div>
            <div style="width: 300px;">新建时间</div>
            <div style="width: 150px;">是否有效</div>
            <div style="width: 300px;">操作</div>
        </div>

        <div class="tr" v-for="(item) in arr" :key="item.id" style="padding-left:30px">
            <div style="width: 50px;">
                <input type="checkbox" v-model="multipleSection" :value="item.id">
            </div>
            <div style="width: 150px;">{{ item.id }}</div>
            <div style="width: 150px;">{{ item.name }}</div>
            <div style="width: 200px;">{{ item.StaffNo }}</div>
            <div style="width: 200px;">{{ rolesTypeObj[item.rolesType] }}</div>
            <div style="width: 250px;">{{ explainTypeObj[item.explainType] }}</div>
            <div style="width: 300px;">{{ item.time }}</div>
            <div style="width: 150px;">{{ typeObj[item.type] }}</div>
            <div class="icon-content" style="width: 300px;">
                <i class="el-icon-edit" style="margin-right:4px;color: #5c69e6; cursor: pointer;"
                    @click="alter(item)"><span style="color:#000;">修改</span></i>
                <i class="el-icon-delete" style="margin-right:4px;color: #5c69e6; cursor: pointer; " @click="
                handDelete(item.id)"><span style="color:#000">删除</span></i>
                <!-- <i class="el-icon-refresh-right" style="margin-right:4px;color: #5c69e6;"><span
                        style="color:#000">重置密码</span></i> -->
            </div>

        </div>

    </div>
</template>

<script>
import { deleteOneApi, deleteAllApi } from '../api/homeApi.js'
import eventBus from '../utils/eventBus'
export default {
    props: ['arr'],


    data() {
        return {
            typeObj: {
                0: '是',
                1: "否"
            },
            rolesTypeObj: {
                0: "管理员",
                1: "街道负责人",
            },
            explainTypeObj: {
                0: "该账号拥有所有的权限",
                1: "请上传车位信息"
            },
            //被选中的列表记录
            multipleSection: [],
        }
    },


    mounted() {
        eventBus.$on('batchDetele', this.deleteSome)
    },

    methods: {

        // 单删
        handDelete(id) {
            console.log(id, "-------------id")
            deleteOneApi({ id: id }).then(res => {
                if (res.code == 200) {
                    this.$message.success("刪除成功")
                    this.$emit('resetHome')
                }
            }).catch(err => {
                this.$message.error(err.message);
            })
        },

        //修改
        alter(id) {
            //  1.打开弹窗修改数据
            // console.log("alter-------------", id.id);
            this.$emit('unpdateDialog', id)
            // console.log('unpdateDialog', id);
        },

        // 批量删除
        deleteSome() {
            let num = 0
            let Num = this.multipleSection.length
            console.log("this.mu---", Num);
            if (this.multipleSection) {
                console.log("multipleSection", this.multipleSection);
                this.multipleSection.forEach(item => {
                    console.log("item", item);

                    deleteOneApi({ id: item }).then(res => {
                        console.log('res', res);
                        if (res.code == 200) {
                            num++
                            this.$emit('resetHome')
                            if (num == Num && num != 0) {
                                this.$message.success("批量刪除成功")
                            }
                        }
                    })

                })
                this.multipleSection = []

            }
            // if (num == Num && num != 0) {
            //     this.$message.success("批量刪除成功")
            // }
            //         this.$message.success("批量刪除成功")



        }

    }
}



</script>

<style lang="less" scoped>
div {
    box-sizing: border-box;
}

/deep/.el-checkbox__label {
    font-size: 16px;
}

.theader {

    text-align: center;
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    line-height: 50px;
    box-shadow: 1px 3px rgba(182, 189, 202, 0.5);
    border-radius: 8px;
    margin-bottom: 10px;
}

.tr {
    display: flex;
    // justify-content: space-around;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 1px 3px rgba(182, 189, 202, 0.5);
}


.tr:hover {
    background: rgba(216, 206, 206, 0.349);
}
</style>